<template>
	<div class="div">
		<div class="div2">
			<h5>热度图片列表</h5>
			<h6>类型自定义，获取时指定类型&nbsp;1=轮播图&nbsp;2=广告图</h6>
		</div>
		<hr>
		<el-button style="background-color: #1E9FFF;color: white;margin-bottom: 3vh;margin-top: 2vh;margin-left: 2vw;" @click="add()">添加新的热度图片</el-button>
		<div class="div3">

			<el-table :data="hots" border style="width: 100%;">
				<el-table-column prop="memo" label="描述" min-width="160">
				</el-table-column>

				<el-table-column prop="type" label="类型" min-width="160">
				</el-table-column>

				<el-table-column prop="hot" label="优先级" min-width="160">
				</el-table-column>
				
				<el-table-column prop="picture" label="图片" min-width="160">
					<template slot-scope="scope">
						<div style="width: 4vw;height: 4vw;">
							<el-avatar :src="`http://127.0.0.1:80/api/public/showimg/${scope.row.picture}`" style="width: 100%;height: 100%;"/>
						</div>
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="goUpdate(scope.row.id)">修改</el-button>
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'findHot',
		data() {
			return {
				hot: {id:0},
				hots: []
			}
		},
		methods: {
			findBookHot() {
				this.$get("/api/adm/hot/findAll").then((resp) => {
					console.log(resp.data);
					this.hots = resp.data.data;
					console.log(this.hots);
				})
			},
			add(){
				this.$router.push({
					path: '/adm/addhot',
					query: {
						id: this.hot.id
					}
				});
			},
			goUpdate(id){
				this.$router.push({
					path: '/adm/updatehot',
					query: {
						id: id
					}
				});
			},
			remove(id){
				this.$get("/api/adm/hot/remove/" + id).then((
					resp) => {
						console.log(resp.data);
					this.hots = resp.data.data;
				})
			}
		},
		mounted() {
			this.findBookHot();
		}
	}
</script>

<style scoped>
	.div {
		width: 100%;
	}

	.div .div2 {
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 4vh auto;
	}

	.div .div2 h5 {}

	.div hr {
		width: 95%;
		margin: 1vh auto;
		border: 1px solid #1E9FFF;
	}

	.div .div3 {
		width: 95%;
		margin: 0 auto;
	}

	.div .div3 el-table {
		width: 100%;
		margin-top: 2vh;
	}
</style>
